<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="姓名" width="180" />
    <el-table-column prop="name" label="奖惩信息" width="180" />
    <el-table-column prop="address" label="发布日期" width="300" />
    <el-table-column prop="note" label="备注" width="300" />
    <el-table-column prop="issuer" label="发布人" width="180" />
    <el-table-column fixed="right" label="Operations" width="120">
      <template #default>
        <el-button link type="primary" size="small" @click="handleClick">修改</el-button>
        <el-button link type="primary" size="small" @click="handleClick">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-row>
    <el-col :span="24"><div class="grid-content ep-bg-purple-dark" /></el-col>
  </el-row>
  <div class="flex">
    <span style="margin-left: 1140px;vertical-align:middle">
      <el-button color="#626aef" :dark="isDark">添加</el-button>
    </span>
  </div>
</template>

<script setup>
const handleClick = () => {
  console.log('click')
}
const tableData = [
  {
    date: 'Tom',
    name: '+200',
    address: '2016-05-03',
    note: '年终奖',
    issuer: '王经理'
  },
  {
    date: 'Bob',
    name: '-300',
    address: '2016-05-02',
    note: '缺勤',
    issuer: '李经理'
  },
  {
    date: 'Lisa',
    name: '-50',
    address: '2016-05-04',
    note: '迟到',
    issuer: '苏经理'
  },
  {
    date: 'John',
    name: '+200',
    address: '2016-05-01',
    note: '加班补偿',
    issuer: '李经理'
  }
]
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
</script>

<script>
export default {
  name: "staff_RP"
}
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 12px;
}
</style>